<script setup>
import { ref, watch } from 'vue'
import RegisterModal from './RegisterModal.vue'
import SignModal from './SignModal.vue'
import { useUserStore } from '@/store/modules/user.js'
import { searchBook } from '@/api/book/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
// 获取子组件
const register = ref(null)
const login = ref(null)
// 注册弹框
const showRegModal = () => {
  register.value.showRegisterModal()
}
// 登录弹框
const showSignModal = () => {
  login.value.showSignModal()
}

// 搜索书籍
const name = ref()
const bookData = ref([])

// 选择进入书籍详情页
const handleChange = (val) => {
  router.push(`/shuku/${val}`)
}
let timeout = null
// 防抖
const handleSearch = val => {
  if (timeout !== null) clearInterval(timeout)
  timeout = setTimeout(() => {
    name.value = val
  }, 1000)
}


watch(name, (newVal) => {
  searchBook({ query: newVal }).then(res => {
    bookData.value = res.map(t => ({ label: t.title, value: t.id }))
  })
})
</script>
<template>
  <div class="header">
    <div class="header-container">
      <a-row v-if="!userStore.userInfo.avatar">
        <a-col :span="4">
          <router-link to="/">
            <img src="@/assets/logo.png" class="logo">
          </router-link>
        </a-col>
        <a-col :span="1" :offset="18">
          <a-button type="link" class="btn" @click="showRegModal">注册</a-button>
        </a-col>
        <a-col :span="1">
          <a-button type="link" class="btn" @click="showSignModal">登录</a-button>
        </a-col>
      </a-row>
      <a-row v-else>
        <a-col :span="4">
          <router-link to="/">
            <img src="@/assets/logo.png" class="logo">
          </router-link>
        </a-col>
        <a-col :span="2" :offset="16">
          <router-link to="/user">
            <img :src="userStore.userInfo.avatar" alt="" class="avatar">
          </router-link>
        </a-col>
        <a-col :span="2">
          <a-button type="link" class="btn" @click="userStore.Logout">退出</a-button>
        </a-col>
      </a-row>
      <div class="search-wrapper">
        <a-row justify="center">
          <a-col>
            <div class="title">吃货中文网</div>
          </a-col>
        </a-row>
        <a-row justify="center">
          <a-col>
            <a-select
              v-model:value="name"
              show-search
              placeholder="请输入书名"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              class="search"
              :options="bookData"
              @search="handleSearch"
              @change="handleChange"
            ></a-select>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
  <RegisterModal ref="register"/>
  <SignModal ref="login"/>
</template>

<style lang="less">
  .header {
    background-color:#f6f7f9;
    &-container {
    width: 1300px;
    min-width: 1000px;
    padding-top: 20px;
    margin: 0 auto;
    }
    .btn {
      height:72px;
      color: #0d141e;
      font-size: 16px;
      font-weight: 500;
      opacity: .7;
      &:hover {
        opacity: 1;
      }
    }
    .search-wrapper {
      margin-top: 80px;
      .search {
        margin-top: 80px;
        margin-bottom: 80px;
        width: 840px;
        font-size: 20px;
        }
      .title {
          margin: 0 auto;
          height: 36px;
          line-height:36px;
          font-size: 36px;
          font-weight: 500;
      }
      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .logo {
      width: 72px;
      height: 72px;
    }
    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
    }
  }
</style>
<style lang="less">
.search-wrapper {
  .ant-select {
    font-size: 20px;
  }
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 52px;
    line-height: 52px;
    border-radius: 25px;
    padding-left: 18px;
  }
  .ant-select:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
    height: 52px;
    line-height: 52px; 
  }
  .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
  line-height: 52px;
  }
  .ant-select-single .ant-select-selector .ant-select-selection-item {
    line-height: 52px;
  }
}
</style>
